<template xmlns:v-popover="http://www.w3.org/1999/xhtml">
<!--<div class="headBar">
  <div class="itme headBar-img">
    <h1>Paddyi</h1>
  </div>
  <div class="itme headBar-li">
  <ul id="menu">
    <li>Home</li>
    <li>About</li>
    <li>联系方式</li>
    <li>文档</li>
  </ul>
  </div>
</div>-->
  <div class="headBar">
  <span class="navbar">
  <el-menu :default-active="activeIndex" class="el-menu" mode="horizontal" @select="handleSelect" router>
    <el-menu-item index="HomePage">HOME</el-menu-item>
    <el-menu-item index="/" ><a class="source" href="https://gitee.com/weberos/paddyi-www.git" target="_blank" >源码</a></el-menu-item>
    <el-menu-item index="/"><a class="source" href="http://wap.paddyi.com" target="_blank" >手机站</a></el-menu-item>
    <el-menu-item index="Document">文档</el-menu-item>
    <el-menu-item index="Contact">联系方式</el-menu-item>
    <el-menu-item index="/" ><a class="source" href="http://admin.paddyi.com" target="_blank" >后台入口</a></el-menu-item>
  </el-menu>
</span>
  <span class="toolbar">
  <el-menu v-if="!$store.state.isLogin" class="el-menu-demo" mode="horizontal" @select="handleSelect" router>
    <el-menu-item  index="Login">登录</el-menu-item>
    <el-menu-item index="Register">注册</el-menu-item>
  </el-menu>
    <el-menu v-if="$store.state.isLogin" class="el-menu-demo" mode="horizontal">
    <el-menu-item >
      <span class="user-info" v-popover:popover><img :src="$store.state.img">{{$store.state.name}}</span>
      <el-popover ref="popover" placement="bottom" trigger="hover" :visible-arrow="false" >
    <UserPanel ></UserPanel>
          </el-popover>
    </el-menu-item>
  </el-menu>
</span>
  </div>
</template>

<script>
  import UserPanel from"../User/UserPanel"
  export default {
    components: {
      UserPanel
    },
    data() {
      return {
      }
    },
    //注意这里我是将它的改为这样的，效果是一样的，但使用这个可以在页面任何部位设置跳转时头部导航条部分样式会跟这变化即为选中，
    // 而不是不变的例如：你设置跳转到产品页导航条的样式也会跟着选中产品项
    computed:{
      activeIndex(){
        return this.$route.path.replace('/','')
      }
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
</script>
<style scoped lang="scss">
  .headBar {
    margin-bottom: 10px;
    height: 60px;
    width: 1024px;
    /*border-bottom: solid 1px #3B5356;*/
    background-color: #FFFFFF;
    display:table-cell; /*按照单元格的样式显示元素*/
    vertical-align:bottom; /*底对齐*/
  }
  .navbar{
    float: left;
  }
  .source{
    text-decoration: none;
  }
  .toolbar{
    float: right;
  }
  .user-info {
    font-family: 'Typography';
    font-size: 16px;
    color: #2c3e50;
    cursor: pointer;
    img {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      margin: 10px 0px 10px 10px;
      float: right;
    }
  }
</style>
